<template>
    <view class="page">
        <view class="textArea">
            <view class="ins md2Text mgrey">
                为确保是本人操作，请完成以下验证
            </view>
            <view class="title mdTitle">
                <view style="margin-bottom: 20rpx;">我们将发送验证码到旧手机</view>
                {{mobile.slice(0, 3)}}****{{mobile.slice(-4)}}
            </view>
        </view>

        <view class="checkNum">
            <input type="text" v-model="code" placeholder="请输入验证码" class="mdTitle systemIn" />

            <view class="getNum mdTitle" @click="send">
                {{is_send ? time+'秒后重试' : '获取验证码'}}
            </view>
        </view>



        <button type="default" class="submitBtn" @click="submit"><text class="md2Title">提交</text></button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                mobile: '',
                code: '',

                is_send: false,
                time: 60
            }
        },
        onLoad() {
            var user = uni.getStorageSync('user');
            if (user) {
                this.mobile = user.mobile;
            }
        },
        methods: {
            send() {
                if (this.is_send) return false;

                this._ajax({
                    url: '/api/sms/send',
                    data: {
                        mobile: this.mobile,
                        event: 'profile'
                    },
                    success: res => {
                        if (res.code == 1) {
                            this.is_send = true;
                            var timer = setInterval(() => {
                                this.time--;
                                if (this.time == 0) {
                                    this.time = 60;
                                    this.is_send = false;
                                    clearInterval(timer);
                                }
                            }, 1000);
                        } else {
                            this._toast(res.msg);
                        }
                    }
                }, 1);
            },
            submit() {
                if (!this.code) {
                    return this._toast('请输入验证码');
                }
                this._ajax({
                    url: '/api/sms/check',
                    data: {
                        mobile: this.mobile,
                        captcha: this.code,
                        event: 'profile'
                    },
                    success: res => {
                        console.log(JSON.stringify(res))
                        if (res.code == 1) {
                            this._toView('views/mine/bindmobile');
                        } else {
                            this._toast(res.msg)
                        }
                    }
                }, 1);
            }
        },

        props: {

        }
    }
</script>

<style scoped lang='less'>
    .page {
        width: 100%;
        height: 100vh;
        background: #f9f9f9;

        .textArea {
            width: 600upx;
            padding-top: 112upx;
            margin: 0 auto;
            padding-bottom: 100upx;

            .title {
                width: 100%;
                text-align: center;
            }

            .ins {
                width: 100%;
                text-align: center;
                margin-bottom: 80upx;
            }
        }

        .checkNum {
            width: 100%;
            height: 104upx;
            background: #FFFFFF;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .systemIn {
                color: #CCCCCC;
                padding-left: 42upx;
            }

            .getNum {
                color: #3465B1;
                padding: 0 42upx;
            }
        }

        .submitBtn {
            width: 686upx;
            height: 80upx;
            line-height: 80rpx;
            background: linear-gradient(110deg, #3465B1 0%, #5577AE 100%);
            box-shadow: 0px 4upx 6upx rgba(33, 159, 255, 0.36);
            opacity: 1;
            color: #fff;
            border-radius: 150upx;
            margin: 89upx auto;
        }
    }
</style>
